<script setup lang="ts">
  import ModuleModal from './ModuleModal.vue'
  import { PropType, ref } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import infoTip from '@/config/info-tip'
  import {
    useModulesMobileShowOrHide,
    useModulesStatusUpdate,
    useModulesDel,
    useModulesFaultsEnableOrDisable,
    useModulesSnCodeEnableOrDisable,
    useModulesSendBeforeIncomeEnableOrDisable,
    useModulesFeeConfirmEnableOrDisable,
    useModulesInspectProcessEnableOrDisable,
    useModulesServiceReportEnableOrDisable,
    useModulesUpdateCheckMethod,
  } from '@/services/pages/return-factory'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { MultipleOperateType } from './types'
  import {
    useMultipleEnabledSelectNetwork,
    useMultipleDisabledSelectNetwork,
    useWriteLogisticsEnableByIds,
    useWriteLogisticsDisableByIds,
    useReceiptEnableByIds,
    useReceiptDisableByIds,
  } from '@/services/pages/return-factory/useModule'

  const { enableWriteLogistics } = useWriteLogisticsEnableByIds()
  const { disableWriteLogistics } = useWriteLogisticsDisableByIds()
  const { enableReceipt } = useReceiptEnableByIds()
  const { disableReceipt } = useReceiptDisableByIds()
  const { show: mobileShow, hide: mobileHide } = useModulesMobileShowOrHide()
  const { enable: statusEnable, disable: statusDisable } = useModulesStatusUpdate()
  const { del } = useModulesDel()
  const { enable: enableFaults, disable: disableFaults } = useModulesFaultsEnableOrDisable()
  const { enable: enableSnCodeCheck, disable: disableSnCodeCheck } =
    useModulesSnCodeEnableOrDisable()
  const { enable: enableSendBeforeIncome, disable: disableSendBeforeIncome } =
    useModulesSendBeforeIncomeEnableOrDisable()
  const { enable: enableFeeConfirm, disable: disableFeeConfirm } =
    useModulesFeeConfirmEnableOrDisable()
  const { enable: enableInspectProcess, disable: disableInspectProcess } =
    useModulesInspectProcessEnableOrDisable()
  const { enable: enableServiceReport, disable: disableServiceReport } =
    useModulesServiceReportEnableOrDisable()
  const { toWholeOrder, toAlone } = useModulesUpdateCheckMethod()
  const { enable: enabledSelectNetwork } = useMultipleEnabledSelectNetwork()
  const { disabled: disabledSelectNetwork } = useMultipleDisabledSelectNetwork()

  defineOptions({
    name: 'HeaderReturnFactorySetModule',
  })

  const props = defineProps({
    selectedModuleIds: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'get-list', value: string): void
  }>()

  const moduleModalVisible = ref(false)
  const getReturnFactoryListKeyword = ref('')
  const multipleOperatePopoverVisible = ref(false)

  const handleMultipleOperate = (type: MultipleOperateType) => {
    if (props.selectedModuleIds.length === 0) {
      HMessageBox.error(infoTip.returnFactory.module.noSelectModule)
      return
    }

    const msgOption: Record<MultipleOperateType, string> = {
      mobileShow: infoTip.returnFactory.module.multipleMobileShow,
      mobileHide: infoTip.returnFactory.module.multipleMobileHide,
      enable: infoTip.returnFactory.module.multipleEnable,
      disable: infoTip.returnFactory.module.multipleDisable,
      del: infoTip.returnFactory.module.multipleDel,
      enableFaults: infoTip.returnFactory.module.multipleEnableFaults,
      disableFaults: infoTip.returnFactory.module.multipleDisableFaults,
      enableSnCodeCheck: infoTip.returnFactory.module.multipleEnableSnCodeCheck,
      disableSnCodeCheck: infoTip.returnFactory.module.multipleDisableSnCodeCheck,
      enableSendBeforeIncome: infoTip.returnFactory.module.multipleEnableSendBeforeIncome,
      disableSendBeforeIncome: infoTip.returnFactory.module.multipleDisableSendBeforeIncome,
      enableFeeConfirm: infoTip.returnFactory.module.multipleEnableFeeConfirm,
      disableFeeConfirm: infoTip.returnFactory.module.multipleDisableFeeConfirm,
      enableInspectProcess: infoTip.returnFactory.module.multipleEnableInspectProcess,
      disableInspectProcess: infoTip.returnFactory.module.multipleDisableInspectProcess,
      enableServiceReport: infoTip.returnFactory.module.multipleEnableServiceReport,
      disableServiceReport: infoTip.returnFactory.module.multipleDisableServiceReport,
      updateToWholeOrderCheck: infoTip.returnFactory.module.multipleUpdateToWholeOrderCheck,
      updateToAloneCheck: infoTip.returnFactory.module.multipleUpdateToAloneCheck,
      enableSelectNetwork: infoTip.returnFactory.module.multipleEnableSelectNetwork,
      disableSelectNetwork: infoTip.returnFactory.module.multipleDisableSelectNetwork,
      enableWriteLogistics: '是否要开启选中模块的物流填写',
      disableWriteLogistics: '是否要关闭选中模块的物流填写',
      enableReceipt: '是否要开启选中模块的返厂签收',
      disableReceipt: '是否要关闭选中模块的返厂签收',
    }

    ElMessageBox({
      title: '提示',
      message: msgOption[type],
      type: type === 'del' ? 'error' : 'warning',
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
          return
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          let res: APIResponse | null = null
          switch (type) {
            case 'mobileShow':
              res = await mobileShow(props.selectedModuleIds)
              break
            case 'mobileHide':
              res = await mobileHide(props.selectedModuleIds)
              break
            case 'enable':
              res = await statusEnable(props.selectedModuleIds)
              break
            case 'disable':
              res = await statusDisable(props.selectedModuleIds)
              break
            case 'del':
              res = await del(props.selectedModuleIds)
              break
            case 'enableFaults':
              res = await enableFaults(props.selectedModuleIds)
              break
            case 'disableFaults':
              res = await disableFaults(props.selectedModuleIds)
              break
            case 'enableSnCodeCheck':
              res = await enableSnCodeCheck(props.selectedModuleIds)
              break
            case 'disableSnCodeCheck':
              res = await disableSnCodeCheck(props.selectedModuleIds)
              break
            case 'enableSendBeforeIncome':
              res = await enableSendBeforeIncome(props.selectedModuleIds)
              break
            case 'disableSendBeforeIncome':
              res = await disableSendBeforeIncome(props.selectedModuleIds)
              break
            case 'enableFeeConfirm':
              res = await enableFeeConfirm(props.selectedModuleIds)
              break
            case 'disableFeeConfirm':
              res = await disableFeeConfirm(props.selectedModuleIds)
              break
            case 'enableInspectProcess':
              res = await enableInspectProcess(props.selectedModuleIds)
              break
            case 'disableInspectProcess':
              res = await disableInspectProcess(props.selectedModuleIds)
              break
            case 'enableServiceReport':
              res = await enableServiceReport(props.selectedModuleIds)
              break
            case 'disableServiceReport':
              res = await disableServiceReport(props.selectedModuleIds)
              break
            case 'updateToWholeOrderCheck':
              res = await toWholeOrder(props.selectedModuleIds)
              break
            case 'updateToAloneCheck':
              res = await toAlone(props.selectedModuleIds)
              break
            case 'enableSelectNetwork':
              res = await enabledSelectNetwork(props.selectedModuleIds)
              break
            case 'disableSelectNetwork':
              res = await disabledSelectNetwork(props.selectedModuleIds)
              break
            case 'enableWriteLogistics':
              res = await enableWriteLogistics(props.selectedModuleIds)
              break
            case 'disableWriteLogistics':
              res = await disableWriteLogistics(props.selectedModuleIds)
              break
            case 'enableReceipt':
              res = await enableReceipt(props.selectedModuleIds)
              break
            case 'disableReceipt':
              res = await disableReceipt(props.selectedModuleIds)
              break
          }
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            const successOption: Record<MultipleOperateType, string> = {
              mobileShow: infoTip.returnFactory.module.multipleMobileShowSuccess,
              mobileHide: infoTip.returnFactory.module.multipleMobileHideSuccess,
              enable: infoTip.returnFactory.module.multipleEnableSuccess,
              disable: infoTip.returnFactory.module.multipleDisableSuccess,
              del: infoTip.returnFactory.module.multipleDelSuccess,
              enableFaults: infoTip.returnFactory.module.multipleEnableFaultsSuccess,
              disableFaults: infoTip.returnFactory.module.multipleDisableFaultsSuccess,
              enableSnCodeCheck: infoTip.returnFactory.module.multipleEnableSnCodeCheckSuccess,
              disableSnCodeCheck: infoTip.returnFactory.module.multipleDisableSnCodeCheckSuccess,
              enableSendBeforeIncome:
                infoTip.returnFactory.module.multipleEnableSendBeforeIncomeSuccess,
              disableSendBeforeIncome:
                infoTip.returnFactory.module.multipleDisableSendBeforeIncomeSuccess,
              enableFeeConfirm: infoTip.returnFactory.module.multipleEnableFeeConfirmSuccess,
              disableFeeConfirm: infoTip.returnFactory.module.multipleDisableFeeConfirmSuccess,
              enableInspectProcess:
                infoTip.returnFactory.module.multipleEnableInspectProcessSuccess,
              disableInspectProcess:
                infoTip.returnFactory.module.multipleDisableInspectProcessSuccess,
              enableServiceReport: infoTip.returnFactory.module.multipleEnableServiceReportSuccess,
              disableServiceReport:
                infoTip.returnFactory.module.multipleDisableServiceReportSuccess,
              updateToWholeOrderCheck:
                infoTip.returnFactory.module.multipleUpdateToWholeOrderCheckSuccess,
              updateToAloneCheck: infoTip.returnFactory.module.multipleUpdateToAloneCheckSuccess,
              enableSelectNetwork: infoTip.returnFactory.module.multipleEnableSelectNetworkSuccess,
              disableSelectNetwork:
                infoTip.returnFactory.module.multipleDisableSelectNetworkSuccess,
              enableWriteLogistics: '批量开启物流填写成功',
              disableWriteLogistics: '批量关闭物流填写成功',
              enableReceipt: '批量开启返厂签收成功',
              disableReceipt: '批量关闭返厂签收成功',
            }
            HMessage.success(successOption[type])
            getList()
            done()
            multipleOperatePopoverVisible.value = false
            return
          }

          HMessageBox.error(res.message)
        }
      },
    })
  }

  const getList = () => {
    emits('get-list', getReturnFactoryListKeyword.value)
  }
</script>

<template>
  <div class="header-return-factory-set-module">
    <div class="btn-group">
      <h-plain-button @click="moduleModalVisible = true">添加模块</h-plain-button>
      <el-popover
        v-model:visible="multipleOperatePopoverVisible"
        :width="500"
        placement="right-start"
        trigger="click"
      >
        <template #reference>
          <HButton :disabled="props.selectedModuleIds.length === 0" :padding-right="8">
            批量操作
            <template v-if="multipleOperatePopoverVisible">
              <i class="iconfont icon-arrow-left" style="font-size: 10px"></i>
            </template>
            <template v-else>
              <i class="iconfont icon-arrow-right" style="font-size: 10px"></i>
            </template>
          </HButton>
        </template>
        <div class="operate-wrapper">
          <!-- 状态启用、禁用 -->
          <div class="operate status">
            <div class="operate-item enable" @click="handleMultipleOperate('enable')">
              <i class="iconfont icon-qiyong"></i>
              <div class="text">状态启用</div>
            </div>
            <div class="operate-item disable" @click="handleMultipleOperate('disable')">
              <i class="iconfont icon-jinyong1"></i>
              <div class="text">状态禁用</div>
            </div>
          </div>

          <!-- 移动端显示隐藏 -->
          <div class="operate mobile">
            <div class="operate-item enable" @click="handleMultipleOperate('mobileShow')">
              <i class="iconfont icon-ai44"></i>
              <div class="text">移动端显示</div>
            </div>
            <div class="operate-item" @click="handleMultipleOperate('mobileHide')">
              <i class="iconfont icon-yincangbukejian1"></i>
              <div class="text">移动端隐藏</div>
            </div>
          </div>

          <!-- 故障库开启、关闭 -->
          <div class="operate fault">
            <div class="operate-item enable" @click="handleMultipleOperate('enableFaults')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启故障库</div>
            </div>
            <div class="operate-item disable" @click="handleMultipleOperate('disableFaults')">
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭故障库</div>
            </div>
          </div>

          <!-- 序列号校验开启、关闭 -->
          <div class="operate sn-code-check">
            <div class="operate-item enable" @click="handleMultipleOperate('enableSnCodeCheck')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启序列号校验</div>
            </div>
            <div class="operate-item disable" @click="handleMultipleOperate('disableSnCodeCheck')">
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭序列号校验</div>
            </div>
          </div>

          <!-- 允不、禁止先发后收 -->
          <div class="operate send-before-income">
            <div
              class="operate-item enable"
              @click="handleMultipleOperate('enableSendBeforeIncome')"
            >
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">允许先发后收</div>
            </div>
            <div
              class="operate-item disable"
              @click="handleMultipleOperate('disableSendBeforeIncome')"
            >
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">禁止先发后收</div>
            </div>
          </div>

          <!-- 费用确认开启、关闭 -->
          <div class="operate fee-confirm">
            <div class="operate-item enable" @click="handleMultipleOperate('enableFeeConfirm')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启费用确认</div>
            </div>
            <div class="operate-item disable" @click="handleMultipleOperate('disableFeeConfirm')">
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭费用确认</div>
            </div>
          </div>

          <!-- 检测单流程开启、关闭 -->
          <div class="operate test-process">
            <div class="operate-item enable" @click="handleMultipleOperate('enableInspectProcess')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启检测单流程</div>
            </div>
            <div
              class="operate-item disable"
              @click="handleMultipleOperate('disableInspectProcess')"
            >
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭检测单流程</div>
            </div>
          </div>

          <!-- 服务报告开启、关闭 -->
          <div class="operate service-report">
            <div class="operate-item enable" @click="handleMultipleOperate('enableServiceReport')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启服务报告</div>
            </div>
            <div
              class="operate-item disable"
              @click="handleMultipleOperate('disableServiceReport')"
            >
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭服务报告</div>
            </div>
          </div>

          <!-- 审核方式更改 -->
          <div class="operate check-method">
            <div class="operate-item" @click="handleMultipleOperate('updateToWholeOrderCheck')">
              <i class="iconfont icon-genggaikouling"></i>
              <div class="text">更改审核方式为按整单审核</div>
            </div>
            <div class="operate-item" @click="handleMultipleOperate('updateToAloneCheck')">
              <i class="iconfont icon-genggaikouling"></i>
              <div class="text">更改审核方式为单独审核</div>
            </div>
          </div>

          <!-- 允许、禁止选择部门 -->
          <div class="operate network-select">
            <div class="operate-item enable" @click="handleMultipleOperate('enableSelectNetwork')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">允许选择部门</div>
            </div>
            <div
              class="operate-item disable"
              @click="handleMultipleOperate('disableSelectNetwork')"
            >
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">不允许选择部门</div>
            </div>
          </div>

          <!-- 开启、关闭物流填写 -->
          <div class="operate network-select">
            <div class="operate-item enable" @click="handleMultipleOperate('enableWriteLogistics')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启物流填写</div>
            </div>
            <div
              class="operate-item disable"
              @click="handleMultipleOperate('disableWriteLogistics')"
            >
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭物流填写</div>
            </div>
          </div>

          <!-- 开启、关闭返厂签收 -->
          <div class="operate network-select">
            <div class="operate-item enable" @click="handleMultipleOperate('enableReceipt')">
              <i class="iconfont icon-qiyong2"></i>
              <div class="text">开启返厂签收</div>
            </div>
            <div class="operate-item disable" @click="handleMultipleOperate('disableReceipt')">
              <i class="iconfont icon-guanbi2"></i>
              <div class="text">关闭返厂签收</div>
            </div>
          </div>

          <!-- 删除 -->
          <div class="operate delete">
            <div class="operate-item disable" @click="handleMultipleOperate('del')">
              <i class="iconfont icon-shanchu2"></i>
              <div class="text">删除</div>
            </div>
          </div>
        </div>
      </el-popover>
    </div>
    <div class="search">
      <el-input
        v-model.trim="getReturnFactoryListKeyword"
        placeholder="请输入关键字"
        clearable
        @keyup.enter="getList"
        @clear="getList"
      />
      <h-button type="primary" @click="getList">
        <el-icon>
          <Search></Search>
        </el-icon>
        搜索
      </h-button>
    </div>

    <module-modal v-model:visible="moduleModalVisible" @update="getList"></module-modal>
  </div>
</template>

<style scoped lang="scss">
  .operate-wrapper {
    display: grid;
    grid-template-columns: 140px 130px 1fr;
    row-gap: 12px;

    .operate {
      display: flex;
      flex-direction: column;
      row-gap: 6px;
      cursor: pointer;

      .operate-item {
        height: 16px;
        line-height: 16px;
        display: flex;
        column-gap: 5px;
        align-items: center;

        &:hover {
          color: $primaryColor;
        }

        .iconfont {
          width: 20px;
          font-size: 14px;
          text-align: center;
        }
      }

      .enable {
        .iconfont {
          color: $secondColor3;
        }
      }

      .disable {
        .iconfont {
          color: $deleteColor;
        }
      }
    }

    .mobile {
      .operate-item {
        .iconfont {
          font-size: 20px;
        }
      }
    }

    .status {
      .operate-item {
        .iconfont {
          font-size: 17px;
        }
      }
    }

    .check-method {
      .operate-item {
        .iconfont {
          font-size: 16px;
          color: $primaryColor;
        }
      }
    }
  }

  .header-return-factory-set-module {
    display: flex;
    justify-content: space-between;

    .btn-group {
      display: flex;
      column-gap: 5px;
    }

    .search {
      display: flex;
      column-gap: 5px;

      :deep(.el-select) {
        width: 160px;
      }

      :deep(.el-input) {
        width: 140px;
      }
    }
  }
</style>
